<template>
  <div>
    <Nav></Nav>
    <ContentMid></ContentMid>
    <Recommend></Recommend>
    <Rank> </Rank>
    <GuessLike></GuessLike>
    <Floor v-for="floor in floors" :key="floor.id" :floor="floor"></Floor>
    <BottomList></BottomList>
  </div>
</template>
<script>
import ContentMid from "./ContentMid";
import Recommend from "./Recommend";
import Rank from "./Rank";
import GuessLike from "./GuessLike";
import BottomList from "./BottomList";
import Floor from "./Floor";
import { mapState, mapActions } from "vuex";
export default {
  name: "Home",
  mounted() {
    this.getFloors();
  },
  components: {
    ContentMid,
    Recommend,
    Rank,
    GuessLike,
    BottomList,
    Floor,
  },
  computed: {
    ...mapState("home", ["floors"]),
    // ...mapState("login", ["name","nickname","id"]),
  },
  methods: {
    ...mapActions("home", ["getFloors"]),
  },
};
</script>
<style>

</style>